/*Ici, notre design principal correspond à la présentation 
qu'on souhaite avoir sur mobile*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.conteneur-flex{
    display: flex;
    flex-flow: column wrap;
    margin: 10px;
}
.sous-conteneur-flex{
    flex: 1 1 auto;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    background-color: RGBa(120,150,240,1);
    margin: 0px 0px 20px 0px;
}
.element-flex{
    flex: 1 1 auto;
    background-color: RGBa(120,240,150,0.7);
    height: 50px;
    margin: 10px;
}
/*Styles spécifiques pour les écrans de taille moyenne type tablette*/
@media screen and (min-width: 780px) and (max-width: 979px){
    .conteneur-flex{
        flex-flow: row wrap;
    }
    .sous-conteneur-flex{
        margin: 0px 10px;
    }
}
/*Styles spécifiques pour les grands écrans type écrans d'ordinateur*/
@media screen and (min-width: 980px){
    .conteneur-flex{
        flex-flow: row wrap;
    }
    .sous-conteneur-flex{
        flex-flow: row wrap;
        margin: 0px 10px;
    }
}